<template>
  <div class="rankingList-age">
    <div class="rankingList-top">
        <div class="rankingList-top_item">
          <img src="../assets/login-register/cancel.png" @click="Return" class="rankingList-top_img" alt="">
        </div>
      <div class="rankingList-top_item rankingList-top_center">排行榜</div>
      <div class="rankingList-top_item">
          <img src="../assets/icon/menu.png" class="rankingList-top_img2" alt="">
        </div>
    </div>
    <div class="main">
      <div class="title">{{rankingListTop_name}}</div>
      <div class="list">
        <img :src="rankingListTop_img" class="list_img" alt="">
        <div class="list_right">
          <div class="list_right_text">
              <p v-for="(item, index) in rankingListTop" :key="index">{{index+1}}.{{item.first}}</p>
          </div>
        </div>
        <div class="update">每日更新</div>
      </div>
      <div class="title">官方榜</div>
      <div class="list" v-for="(item, index) in rankingList" :key="index">
        <img :src="item.coverImgUrl" class="list_img" alt="">
        <div class="list_right">
          <div class="list_right_text">
            <p v-for="(value, key) in item.tracks" :key="key">
              {{key+1}}.{{value.first}} - {{value.second}}
            </p>
          </div>
        </div>
        <div class="update">{{item.updateFrequency}}</div>
      </div>
      <div class="bang">
        <div class="title">推荐榜</div>
        <div class="list-others" v-for="item in recommendationList">
          <img :src="item.coverImgUrl" class="list_img2" alt="">
          <div class="list_word">{{item.name}}</div>
          <div class="update2">{{item.updateFrequency}}</div>
        </div>

      </div>
     <div class="bang">
       <div class="title">全球榜</div>
       <div class="list-others2" v-for="item in global">
         <img :src="item.coverImgUrl" class="list_img2" alt="">
         <div class="list_word">{{item.name}}</div>
         <div class="update2">{{item.updateFrequency}}</div>
       </div>
     </div>
      <div class="bang">
        <div class="title">更多榜单</div>
        <div class="list-others3" v-for="item in more">
          <img :src="item.coverImgUrl" class="list_img2" alt="">
          <div class="list_word">{{item.name}}</div>
          <div class="update2">{{item.updateFrequency}}</div>
        </div>
      </div>


    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
  import footer from "@/components/footer/"
     export default {
          name: "ranking",
       data() {
         return {
           rankingList: [],
           rankingListTop: [],
           rankingListTop_img: '',
           rankingListTop_name: '',
           recommendationList: [], // 推荐榜
           global: [], // 推荐榜
           more:[],
         };
       },
      components: {

        'v-footer': footer,
      },
       methods: {
           Return(){
             this.$router.push({ name: 'Home' });
         }
       },
       created() {
         this.$http.get('http://localhost:3000/toplist/detail').then((res) => {
           this.rankingList = res.data.list.slice(0, 4);
           this.rankingListTop = res.data.artistToplist.artists;
           this.rankingListTop_img = res.data.artistToplist.coverUrl;
           this.rankingListTop_name = res.data.artistToplist.name;
           // 推荐榜
           console.log(res);
           this.recommendationList = res.data.list.slice(4, 10);
           this.global = res.data.list.slice(10, 16);
           this.more = res.data.list.slice(16, (res.data.list.length));
         });
       },
     }
</script>

<style scoped>
  .rankingList-age{
    width: 100vw;
    margin-bottom: 100px;
    background: #FBFCFD;
  }
  .rankingList-top{
    width: 100vw;
    height: 50px;
    background: #C64B3D;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #fffdef;
    position: fixed;
    z-index: 1000;

  }
  .rankingList-top_item{
    width: 33vw;
    height: 50px;
    float: left;
  }
  .rankingList-top_img{
    width: 12px;
    display: block;
    margin-top: 15px;
    margin-left: 15px;
  }
  .rankingList-top_img2{
    width: 18px;
    display: block;
    margin-top: 18px;
    margin-left: 90px;
  }

  .main{
    width: 100vw;
    position: absolute;
    top: 50px;
    left: 0;
    margin-bottom: 50px;
  }
  .bang{
    width: 100vw;
    height: 340px;
  }
  .title{
    width: 100vw;
    height: 40px;
    font-size: 16px;
    font-weight: bold;
    line-height: 50px;
    text-indent: 5px;
  }

  .list{
    width: 100vw;
    height: 120px;
    position: relative;
    margin-bottom: 3px;
  }
  .list_img{
    width: 120px;
    height: 120px;
    border-radius: 5px;
    display: block;
    margin-left: 5px;
  }
  .list_right{
    width: 245px;
    height: 120px;
    position: absolute;
    top: 0;
    right: 0;
    border-bottom: 1px solid #e9eaeb;
  }
  .list_right_text{
    width: inherit;
    height: 80px;
    margin-top: 20px;
  }
  .list_right_text p{
    font-size: 13px;
    width: inherit;
    height: 28px;
    line-height: 28px;
    color: #7B7B7C;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .update{
    width: 100px;
    height: 20px;
    font-size: 10px;
    color: #ccc;
    z-index: 5;
    position: absolute;
    bottom: 0;
    left: 10px;
  }

  .list-others{
    width: 110px;
    height: 150px;
    margin-left: 10px;
    float: left;
    position: relative;

  }
  .list-others2{
    width: 110px;
    height: 150px;
    margin-left: 10px;
    float: left;
    position: relative;

  }
  .list-others3{
    width: 110px;
    height: 150px;
    margin-left: 10px;
    float: left;
    position: relative;

  }
  .list_img2{
    width: 110px;
    height: 110px;
    border-radius: 5px;
    display:block;
  }
  .list_word{
    line-height: 30px;
    font-size: 13px;
    color: #919191;
  }
  .update2{
    width: 100px;
    height: 20px;
    position: absolute;
    bottom: 40px;
    left: 8px;
    font-size: 10px;
    z-index: 500;
    color: #ccc;
  }
  .list_word{
    width: 100px;
    height: 25px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }



</style>
